import React from "react";
import Config from "@/config";
import {CarouselContainer, SeeMoreBox} from "@/component/Home/CardList/style";
import PropTypes from "prop-types";
import {toBase64} from "@/util/CodeUtils";
import JCard from "@/common/Card";
import Slider from "react-slick";
import {to} from "@/util/global";

class GameCarousel extends React.Component {
    constructor(props) {
        super(props);
        this.handleMouseUp = this.handleMouseUp.bind(this);
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.state = {
            isClick: false,
            startPlace: {
                x: null,
                y: null,
            },
            cardHeight: '290px',
            cardStyle: {
                width: "200px", margin: '20px auto',
                boxShadow: '0px 1px 2px 0px rgb(0 0 0 / 15%), 0px 2px 4px 0px rgb(0 0 0 / 10%)'
            },
            settings: {
                infinite: true,
                slidesToShow: 5,
                slidesToScroll: 1,
                // autoplay: true,
                speed: 500,
                autoplaySpeed: 5000,
                pauseOnHover: false,
                adaptiveHeight: true,
                initialSlide: 0,
                cssEase: "linear",
                responsive: [
                    {
                        breakpoint: 1350,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 1,
                            autoplay: true,
                            speed: 500,
                            autoplaySpeed: 5000,
                            pauseOnHover: false,
                            adaptiveHeight: true,
                            initialSlide: 0,
                            cssEase: "linear",
                        }
                    },
                ]
            }
        }
    }

    videoPause(videoName) {
        document.getElementsByName(videoName).forEach(node => {
            if (!node.paused) {
                node.pause()
            }
        })
    }

    handleMouseDown(e) {
        this.setState({
            startPlace: {
                x: e.screenX,
                y: e.screenY,
            }
        })
    }

    handleMouseUp(e) {
        this.setState({
            isClick: Math.sqrt(
                (e.screenX - this.state.startPlace.x) * (e.screenX - this.state.startPlace.x) +
                (e.screenY - this.state.startPlace.y) * (e.screenY - this.state.startPlace.y)
            ) <= 3
        })
    }

    render() {
        return <>
            <SeeMoreBox onClick={() => to({pathname: '/search'})}>
                <Config.IconFont type={'icon-gengduo2'} style={{fontSize: '12px', marginRight: '5px'}}/>
                <span>查看更多</span>
            </SeeMoreBox>
            <CarouselContainer>
                <Slider {...this.state.settings}>
                    {
                        this.props.data ?
                            this.props.data.map(game => {
                                return <div key={game.id}
                                            onMouseDown={this.handleMouseDown}
                                            onMouseUp={this.handleMouseUp}>
                                    <JCard
                                        info={game}
                                        style={this.state.cardStyle}
                                        height={this.state.cardHeight}
                                        onClick={() => {
                                            this.state.isClick ? to(`/game?id=${toBase64(game.id)}`) : null
                                        }}
                                        video={game.videoUrl} photo={game.image}
                                        title={game.cnName} description={game.enName}
                                    />
                                </div>
                            }) : null
                    }
                </Slider>
            </CarouselContainer>
        </>
    }
}

GameCarousel.propTypes = {
    data: PropTypes.array
}


export default GameCarousel;
